.reader-combined-card__header {
	font-size: $font-body-small;
	display: flex;
	max-height: 34px;
	margin-bottom: 20px;
}

.reader-avatar.has-site-icon {
	margin-right: 12px;
}

.reader-combined-card__header-details {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-height: 34px;
}

.reader-combined-card__site-link {
	color: var( --color-accent );
	line-height: 1.2em;
	margin-bottom: 0;
	top: 0;
	overflow: hidden;
	font-weight: 600;

	&:hover {
		color: var( --color-primary-light );
	}

	&::after {
		@include long-content-fade( $size: 5% );
		position: relative;
	}
}

.reader-combined-card__header-post-count {
	color: var( --color-text-subtle );
	margin-bottom: 0;
	line-height: 1em;
	margin-top: 4px;
}

// Posts
.reader-combined-card__post-details {
	font-family: $serif;
	overflow: hidden;
	width: 100%;
}

.reader-combined-card__post-title {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	margin-top: -4px;
	padding-left: 1px;
	position: relative;
}

.reader-combined-card__post-title-link,
.reader-combined-card__post-title-link:visited {
	color: var( --color-neutral-70 );
	cursor: pointer;

	&:hover,
	&:focus {
		color: var( --color-neutral-70 );
	}
}

// Indent at all breakpoints but only if we have a featured asset
.reader-combined-card__post.has-featured-asset .reader-combined-card__featured-asset-wrapper {
	min-width: 64px;
	margin-right: 15px;

	@include breakpoint-deprecated( '>660px' ) {
		min-width: 100px;
	}
}

// Always indent the wrapper at larger breakpoints, asset or no asset
.reader-combined-card__featured-asset-wrapper {
	@include breakpoint-deprecated( '>660px' ) {
		min-width: 100px;
		margin-right: 15px;
	}
}

.reader-combined-card .reader-featured-image {
	display: block;
	height: 64px;
}

.reader-combined-card__post-list {
	margin: 0;
	width: 100%;
}

.reader-combined-card__post {
	list-style-type: none;
	display: flex;
	flex-direction: row;
	margin-bottom: 20px;
	position: relative;

	&.is-seen {
		opacity: 0.5;
	}

	&.is-selected {
		&::before {
			content: '';
			position: absolute;
			top: -2px;
			bottom: 2px;
			left: -8px;
			width: 2px;
			background: var( --color-primary );

			@include breakpoint-deprecated( '>660px' ) {
				left: -16px;
			}
		}
	}

	&.is-placeholder {
		.reader-combined-card__featured-asset-wrapper,
		.reader-combined-card__post-title,
		.reader-excerpt,
		.reader-combined-card__visit-link-placeholder,
		.reader-combined-card__timestamp {
			@include placeholder();
		}

		.reader-combined-card__post-title {
			height: 1.1em;
		}

		.reader-excerpt {
			height: 1em;
			margin-top: 0.5em;
		}

		.reader-combined-card__visit-link-placeholder,
		.reader-combined-card__timestamp {
			height: 1em;
			margin-top: 0.4em;
		}

		.reader-combined-card__visit-link-placeholder {
			width: 50px;
			margin-right: 30px;
		}

		.reader-combined-card__timestamp {
			width: 130px;
		}

		.reader-combined-card__post-author-and-time {
			display: flex;
		}
	}

	&:last-of-type {
		margin-bottom: 18px;
	}
}

.reader-combined-card__post-author-and-time {
	font-size: $font-body-small;
	color: var( --color-text-subtle );
	font-family: $sans;
	overflow: hidden;
	max-height: 14px * 1.4 * 1;
	word-wrap: break-word;
	position: relative;
	margin-top: 3px;

	&:not( .is-placeholder )::after {
		@include long-content-fade( $size: 20% );
	}
}

.reader-combined-card .reader-visit-link {
	margin-left: 0;
	margin-right: 26px;
}

.reader-combined-card .reader-visit-link,
.reader-combined-card .reader-author-link,
.reader-combined-card__timestamp-link {
	color: var( --color-text-subtle );
	cursor: pointer;

	&:focus,
	&:link,
	&:visited {
		color: var( --color-text-subtle );
	}

	&:hover,
	&:active {
		color: var( --color-primary );
	}
}

.reader-combined-card__post .reader-excerpt {
	font-size: $font-body;
	font-weight: 400;
	overflow: hidden;
	max-height: 16px * 1.4 * 1;
	word-wrap: break-word;
	position: relative;
	margin-top: 4px;
	white-space: nowrap;

	&:not( .is-placeholder )::after {
		@include long-content-fade( $size: 10% );
	}
}

.reader-combined-card__site-link {
	&:focus,
	&:link,
	&:visited {
		color: var( --color-primary );
	}

	&:hover,
	&:active {
		color: var( --color-primary-light );
	}
}

// Override standard .card styles in stream
.reader-combined-card.card {
	border-bottom: 1px solid var( --color-neutral-10 );
	box-shadow: none;
	margin: 0 15px;
	padding: 18px 0 0;
	position: relative;

	@include breakpoint-deprecated( '>660px' ) {
		margin: 0;
	}
}

.reader-combined-card__footer {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 15px;
}

.reader-combined-card__options-menu {
	align-self: flex-end;
}

// Follow button for stream cards - copied and pasted from reader-post-card.
// TODO: consolidate somewhere. preferably reader/follow-button
.reader-combined-card__header .follow-button {
	border: 0;
	border-radius: 0;
	float: right;
	padding: 0;
	position: absolute;
	right: 0;
	top: 13px;

	.gridicon {
		fill: var( --color-primary );
	}

	.follow-button__label {
		color: var( --color-primary );
	}

	&.is-following {
		.gridicon {
			fill: var( --color-success );
		}

		.follow-button__label {
			color: var( --color-success );
		}
	}

	&.is-discover {
		position: relative;
		top: 0;
		float: none;
		margin-top: 10px;
		margin-bottom: 3px;

		.follow-button__label {
			@include breakpoint-deprecated( '<660px' ) {
				display: inline;
			}
		}
	}
}
